<template>
  <div style="width: 1600px; margin: auto">
    <el-form :inline="true" :model="query" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="query.name"
          placeholder="请输入生产计划编号/名称"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="query.Sourcetype"
          placeholder="请输入生产计划来源"
          clearable
        >
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="query.finishedname"
          placeholder="请输入产品/名称"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-select v-model="query.state" placeholder="请选择状态" clearable>
          <el-option label="全部" :value="-1" />
          <el-option label="启用" :value="1" />
          <el-option label="禁用" :value="0" />
        </el-select>
      </el-form-item>
      <p></p>
      <div v-show="showsta">
        <el-form-item>
          <el-date-picker
          v-model="value2"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="计划开始时间"
          end-placeholder="计划结束时间开始时间"
          :size="size"
        />
        </el-form-item>
        <el-form-item>
          <el-date-picker
          v-model="value3"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="计划结束时间"
          end-placeholder="计划结束时间"
          :size="size"
        />
        </el-form-item>
        <el-form-item>
          <el-date-picker
          v-model="value4"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="需求开始时间"
          end-placeholder="需求结束时间"
          :size="size"
        />
        </el-form-item>
      </div>

      <el-button
        type="primary"
        style="float: right; margin-right: 350px"
        @click="showsta = !showsta"
        >{{ showsta == true ? "收起" : "展开" }}</el-button
      >

      <el-button
        type="primary"
        style="float: right; margin-right: 40px"
        @click="InquirEvent"
        >查询</el-button
      >
    </el-form>
    <el-button type="primary" @click="AddProductionPlanning">新增</el-button>

    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%; margin-top: 3%"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" property="id" width="50"> </el-table-column>
      <el-table-column label="计划编号" property="planningnumber" width="170">
        <template #default="scope">
          <el-butto
            style="color: darkgoldenrod"
            @click="ToDetailsProductionPlanning(scope.row.planningnumber)"
            >{{ scope.row.planningnumber }}</el-butto
          >
        </template>
      </el-table-column>
      <el-table-column label="计划名称" property="planningname" width="100">
      </el-table-column>
      <el-table-column label="工单数量" property="workOrderCount" width="100">
      </el-table-column>
      <el-table-column label="来源类型" property="sourcetype" width="100">
      </el-table-column>
      <el-table-column label="成品名称" property="finishedname" width="100">
      </el-table-column>
      <el-table-column label="成品编号" property="finishednumber" width="150">
      </el-table-column>
      <el-table-column
        label="规格型号"
        property="specificationversion"
        width="70"
      >
      </el-table-column>
      <el-table-column label="单位" property="unit" width="70">
      </el-table-column>
      <el-table-column label="计划数量" property="planningcount" width="50">
      </el-table-column>
      <el-table-column label="计划开工时间" property="starttime" width="120">
        <template #default="scope">
          <span>{{ scope.row.starttime.substr(0, 10) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="计划完工时间" width="120">
        <template #default="scope">
          <span>{{ scope.row.timeofcompletion.substr(0, 10) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="需求日期" property="demanddate" width="120">
        <template #default="scope">
          <span>{{ scope.row.demanddate.substr(0, 10) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" property="state" width="120">
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button size="small" @click="Disassemble(scope.row.planningnumber)"
            >分解</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="query.pageindex"
        v-model:page-size="query.pagesize"
        :page-sizes="[2, 10, 15, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
  <script>
import { ref, reactive } from "vue";
import { ShowProductionPlanning,CreateWorkOrder } from "../../api/ProductionPlanning";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

export default {
  setup() {
    const size = ref<'default' | 'large' | 'small'>('default')
    const query = reactive({
      pageindex: 1,
      pagesize: 10,
      name: "",
      Sourcetype: "",
      finishedname: "",
      state: "",
      starttime: undefined,
      endtime: undefined,
      timeofcompletion:  undefined,
      endTimeofcompletion: undefined,
      demanddate:  undefined,
      endDemanddate: undefined,
    });
    const tableData = ref([]);
    const totalCount = ref(0);
    // 获取表格数据
    const getData = () => {
      ShowProductionPlanning(query).then((res) => {
        tableData.value = res.result.items;
        totalCount.value = res.result.totalCount || 50;
        console.log(tableData.value);
      });
    };
    getData();
    const ToDetailsProductionPlanning= (id) => {
      console.log(id);
      router.push({
        path: "/DetailsProductionPlanning",
        query:{id:id}
      });

    };
    // 是否展开
    const showsta = ref(false);
    //查询事件
    const InquirEvent = () => {
      query.starttime= value2._rawValue[0]
      query.endtime= value2._rawValue[1]

      query.timeofcompletion= value3._rawValue[0]
      query.endTimeofcompletion= value3._rawValue[1]

      query.demanddate= value4._rawValue[0]
      query.endDemanddate= value4._rawValue[1]
      getData();
    };
    // 分页导航
    const handleSizeChange = (val) => {
      query.pagesize = val;
      query.pageindex = 1;
      getData();
    };
    // 分页导航
    const handleCurrentChange = (val) => {
      query.pageindex = val;
      getData();
    };
    //分解
    const Disassemble = (id) => 
    {
      CreateWorkOrder(id).then((res) => {
      if (res.success == true) {
          ElMessage.success("分解成功");
          getData();
        } else {
          ElMessage.error("分解失败");
          return;
        }
      });
    };
    //新增
  const AddProductionPlanning = () => {
    router.push({
        path: "/AddProductionPlanning",
    
      });
  };
       //
       const value2 = ref('');
       const value3 = ref('');
       const value4 = ref('');
      const router = useRouter();
    return {
      size,
      value3,
      value4,
      value2,
      showsta, // 是否展开
      tableData,
      totalCount,
      query,
      getData,
      ShowProductionPlanning,
      ToDetailsProductionPlanning,
      InquirEvent, //查询事件
      Disassemble, //分解
      handleSizeChange, // 分页导航
      handleCurrentChange, // 分页导航
      AddProductionPlanning,//新增
    };
  },
};
</script>
  







